<template>
    <div class="question-list-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>题目列表</span>
          <el-button style="float: right" type="primary" icon="el-icon-plus" @click="handleCreate">新增题目</el-button>
        </div>
        <!-- 搜索区域 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="题目内容">
            <el-input v-model="searchForm.content" placeholder="请输入题目内容"></el-input>
          </el-form-item>
          <el-form-item label="题目类型">
            <el-select v-model="searchForm.type" placeholder="请选择类型">
              <el-option label="全部" value=""></el-option>
              <el-option label="单选题" value="single"></el-option>
              <el-option label="多选题" value="multiple"></el-option>
              <el-option label="判断题" value="judgment"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="searchForm.difficulty" placeholder="请选择难度">
              <el-option label="全部" value=""></el-option>
              <el-option label="简单" value="1"></el-option>
              <el-option label="中等" value="3"></el-option>
              <el-option label="困难" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
  
        <!-- 题目表格 -->
        <el-table  :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column  prop="id" label="ID"  width="80"></el-table-column>
          <el-table-column prop="content" label="题目内容" min-width="200">
            <template slot-scope="scope">
              <div class="question-content" @click="handleDetail(scope.row.id)">
                {{ scope.row.content | ellipsis(50) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" width="100">
            <template slot-scope="scope">
              <el-tag :type="typeTagMap[scope.row.type]">
                {{ typeTextMap[scope.row.type] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="scope">
              <el-rate v-model="scope.row.difficulty" disabled :max="5"></el-rate>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="pagination"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  import { fetchQuestionList, deleteQuestion } from '@/api/study-question'
  
  export default {
    name: 'QuestionList',
    data() {
      return {
        loading: false,
        searchForm: {
          content: '',
          type: '',
          difficulty: '',
          status: ''
        },
        tableData: [],
        typeTextMap: {
          single: '单选题',
          multiple: '多选题',
          judgment: '判断题'
        },
        typeTagMap: {
          single: 'primary',
          multiple: 'success',
          judgment: 'warning'
        },
        pagination: {
          current: 1,
          size: 10,
          total: 0
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 获取题目列表
      fetchData() {
        this.loading = true
        const params = {
          ...this.searchForm,
          page: this.pagination.current,
          size: this.pagination.size
        }
        
        fetchQuestionList(params).then(response => {
          this.tableData = response.data.items
          this.pagination.total = response.data.total
        }).catch(error => {
          console.error('获取题目列表失败:', error)
          this.$message.error('获取题目列表失败')
        }).finally(() => {
          this.loading = false
        })
      },
      
      // 搜索
      handleSearch() {
        this.pagination.current = 1
        this.fetchData()
      },
      
      // 重置搜索
      resetSearch() {
        this.searchForm = {
          content: '',
          type: '',
          difficulty: '',
          status: ''
        }
        this.handleSearch()
      },
      
      // 分页大小变化
      handleSizeChange(size) {
        this.pagination.size = size
        this.fetchData()
      },
      
      // 当前页变化
      handleCurrentChange(current) {
        this.pagination.current = current
        this.fetchData()
      },
      
      // 状态改变
      handleStatusChange(row) {
        console.log('status update ');
        // updateQuestionStatus(row.id, row.status).then(() => {
        //   this.$message.success('状态更新成功')
        // }).catch(error => {
        //   console.error('状态更新失败:', error)
        //   this.$message.error('状态更新失败')
        //   // 恢复原状态
        //   row.status = row.status === 1 ? 0 : 1
        // })
      },
      
      // 新增题目
      handleCreate() {
        this.$router.push('/study/question/edit')
      },
      
      // 编辑题目
      handleEdit(id) {
        this.$router.push(`/study/question/edit/${id}`)
      },
      
      // 查看详情
      handleDetail(id) {
        this.$router.push(`/study/question/edit/${id}`)
      },
      
      // 删除题目
      handleDelete(id) {
        this.$confirm('确认删除该题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteQuestion(id).then(() => {
            this.$message.success('删除成功')
            this.fetchData()
          }).catch(error => {
            console.error('删除失败:', error)
            this.$message.error('删除失败')
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      }
    },
    filters: {
      ellipsis(value, length) {
        if (!value) return ''
        if (value.length > length) {
          return value.slice(0, length) + '...'
        }
        return value
      }
    }
  }
  </script>
  
  <style scoped>
  .question-list-container {
    padding: 20px;
  }
  
  .search-form {
    margin-bottom: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  
  .question-content {
    cursor: pointer;
    line-height: 1.5;
  }
  
  .question-content:hover {
    color: #409EFF;
  }
  </style>